<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content="All Rights Reserved, Copyright (C) 2013, Wuyeguo, Ltd."/>
    <title>智能应急快速搭建平台V1.0</title>
    <script type="text/javascript" src="../../js/commonCss.js"></script>
    <script type="text/javascript" src="../../js/commonJs.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'west',border:true,split:true,title:'部门选择'"
     style="width: 200px; overflow: auto; height: 800px" align="left">
    <ul id="deptSelect" class="ztree"></ul>
</div>
<div data-options="region:'center',border:false">
    <!-- Begin of toolbar -->
    <div id="wu-toolbar-user">
        <div class="wu-toolbar-button">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAdd()" plain="true">添加</a>
            <!--            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="userEdit()" plain="true">修改</a>-->
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="remove()" plain="true">删除</a>
        </div>
        <div class="wu-toolbar-search">
            <label>姓名：</label><input id="search_userName" name="search_userName" class="wu-text" style="width:100px">
            <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="doSearch()">开始检索</a>
        </div>
    </div>
    <!-- End of toolbar -->
    <table id="user-datagrid" class="easyui-datagrid" toolbar="#wu-toolbar-user"></table>
</div>
<!-- Begin of easyui-dialog -->
<div id="user-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'"
     style="width:400px; padding:10px;">
    <form id="user-form" method="post">
        <input type="hidden" name="userId" id="userId">
        <table>
            <tr>
                <td width="60" align="right">姓 名:</td>
                <td><input type="text" name="userName" id="userName" class="wu-text"/></td>

            </tr>
            <tr>
                <td width="60" align="right">用户名:</td>
                <td><input type="text" name="useSysName" id="useSysName" class="wu-text"/></td>
            </tr>
            <tr>
                <td width="60" align="right">手机号:</td>
                <td><input type="text" name="mobilePhone" class="wu-text"/></td>

            </tr>
            <tr>
                <td align="right">所属部门:</td>
                <td><input type="text" name="showId" class="wu-text" id="showId"/></td>
                <input type="hidden" name="deptId" id="ckddeptId"></tr>
            <tr>
                <td align="right">性别:</td>
                <td><label>
                    <input name="gender" type="radio" id="six_1" value="男">
                    男</label>
                    <label>
                        <input type="radio" name="gender" value="女" id="six_0">
                        女</label></td>
            </tr>
            <tr>
                <td width="60" align="right">邮箱:</td>
                <td><input type="text" name="email" class="wu-text"/></td>
            </tr>
            <tr>
                <td align="right">地址:</td>
                <td><input type="text" name="address" class="wu-text"/></td>
            </tr>
        </table>
    </form>
</div>
<!-- End of easyui-dialog -->
</body>
<script type="text/javascript">
    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        async: {
            enable: true,
            dataType:"json",
            url:"/common/selectDeptZtree",
            autoParam:["id"]
        },
        callback : {
            onClick : zTreeOnClick,
            onAsyncSuccess: zTreeOnAsyncSuccess,// 异步加载正常结束的事件回调函数
        }
    };
    $(function() {

        var tInterval = window.setInterval(function () {
            if( $('#showId').combotree().length>0){
                window.clearInterval(tInterval);
            }
        },100);

        $("#userName,#useSysName").validatebox({
            required:true
        });
        $.fn.zTree.init($("#deptSelect"), setting);
    });

    /**
     * 用于捕获异步加载正常结束的事件回调函数
     */
    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        var nodes = treeObj.getNodes();
        if (nodes.length>0) {
            for(var i=0;i<nodes.length;i++){
                treeObj.expandNode(nodes[i], true, false, false);//默认展开第一级节点
            }
        }
    }

    /**
     * 点击部门节点
     */
    function zTreeOnClick(event, treeId, treeNode) {
        var obj = {'column': "dept_id", 'type': 'eq', "value": treeNode.id};
        var arr = searchData();
        arr.push(obj);
        $('#user-datagrid').datagrid('load', {paramData: JSON.stringify(arr)});
    }
    /**
     * Name 查询
     */
    function doSearch() {
        $('#user-datagrid').datagrid('load', {paramData: JSON.stringify(searchData())});
    }


    /**
     * Name 添加记录
     */
    function add() {
        save("/user/add");
    }

    /**
     * Name 修改记录
     */
    function edit() {
        save("/user/update");
    }

    /**
     * Name 删除记录
     */
    function remove() {
        $.messager.confirm('信息提示', '确定要删除该记录？', function (result) {
            if (result) {
                var items = $('#user-datagrid').datagrid('getSelections');
                var ids = [];
                $(items).each(function () {
                    ids.push(this.userId);
                });
                //alert(ids);return;
                $.ajax({
                    url: '/user/del',
                    data: 'ids=' + ids,
                    success: function (data) {
                        if (data) {
                            $.messager.alert('信息提示', '删除成功！', 'info');
                            $('#user-datagrid').datagrid();
                        } else {
                            $.messager.alert('信息提示', '删除失败！', 'info');
                        }
                    }
                });
            }
        });
    }

    /**
     * Name 打开添加窗口
     */
    function openAdd() {
        $('#user-form').form('clear');
        $('#user-dialog').dialog({
            closed: false,
            modal: true,
            title: "添加信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: add
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#user-dialog').dialog('close');
                }
            }]
        });
        yhComboTree();
    }

    /**
     * Name 打开修改窗口
     */
    function yhEdit(id) {
        $('#user-form').form('clear');
        var jsonArray = [];
        if (id != null && id != "") {
            var obj = {'column': "user_id", 'type': 'eq', "value": id};
            jsonArray.push(obj)
        }
        $.ajax({
            type: 'POST',
            url: '/user/find',
            dataType: 'json',
            data: {paramData: JSON.stringify(jsonArray)},
            success: function (data) {
                //alert(data.data.toString());
                $('#user-form').form('load', data.data);
                yhComboTree();
                var checkV = ($("#ckddeptId").val());
                if (checkV != null && checkV != "") {
                    $('#showId').combotree('setValue', checkV);
                }
            }
        })
        $('#user-dialog').dialog({
            closed: false,
            modal: true,
            title: "修改信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: edit
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#user-dialog').dialog('close');
                }
            }]
        });

    }

    /**
     * Name 载入数据
     */
    $('#user-datagrid').datagrid({
        url: '/user/list',
        //   loadFilter: pagerFilter,
        //idField:"id",
        rownumbers: true,
        //  singleSelect: false,
        pageSize: 20,
        pagination: true,
        //  multiSort: true,
        fitColumns: true,
        //如果为true，该复选框被选中/取消选中，当用户点击某一行上。如果为false，该复选框仅检查/取消选中，当用户点击完全的复选框。
        checkOnSelect:false,
        fit: true,
        pageList: [10, 20, 50, 100, 150, 200],
        columns: [[
            {checkbox: true},
            {field: 'userId', title: 'userId', width: 100, sortable: true, align: 'center', hidden: 'true'},
            {field: 'useSysName', title: '账号', width: 100, sortable: true, align: 'center'},
            {
                field: 'userName',
                title: '姓名',
                width: 180,
                sortable: true,
                align: 'center',
                formatter: function (value, data) {
                    return '<a style="color: blue;" href="javascript:yhEdit(\''+data.userId+'\')">' + data.userName + '</a>';
                }
            },
            {field: 'gender', title: '性别', width: 100, align: 'center'},
            {field: 'email', title: '邮件', width: 100, align: 'center'},
            {field: 'mobilePhone', title: '手机号', width: 100, align: 'center'},
            {field: 'address', title: '地址', width: 100, align: 'center'},
            {field: 'createTime', title: '加入时间', width: 100, align: 'center'}

        ]]
    });

    function searchData() {
        var userName = $("#search_userName").val();
        var jsonArray = [];
        if (userName != null && userName != "") {
            var obj = {'column': "user_name", 'type': 'like', "value": userName};
            jsonArray.push(obj)
        }
        return jsonArray;
    }

    function yhComboTree() {
        $.ajax({
            url: "/common/selectDept",
            type: "POST",
            dataType: "json",
            success: function (data) {
                $('#showId').combotree(
                    'loadData',
                    eval(data.msg));

            },
            error: function () {
                alert("error")
            }
        });
    }

    function save(url) {
        var t = $('#showId').combotree('tree');	// get the tree object
        var n = t.tree('getSelected');		// get selected node
        //  alert(n.id);
        $("#ckddeptId").val(n.id);
        var formObject = {};
        var formArray = $("#user-form").serializeArray();
        $.each(formArray, function (i, item) {
            formObject[item.name] = item.value;
        });
        // alert(JSON.stringify(formObject));
        $.ajax({
            url: url,
            type: "post",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(formObject),
            dataType: "json",
            success: function (data) {
                $.messager.alert('信息提示', '提交成功！', 'info');
                $('#user-dialog').dialog('close');
                $('#user-datagrid').datagrid('reload');
            },
            error: function () {
                $.messager.alert('信息提示', '提交失败！', 'info');
            },

        });
    }
</script>